<template>
	<div>
		<el-upload
			class="upload-demo" 
			ref="fileUpload" 
			multiple 
			:action="FileSaveUrl" 
			:headers="httpHeader" 
			:accept="FileAccepType"
			:file-list="fileinfo" 
			:before-remove="handleFileRemove"
			:on-success="fileUploadSuccess" 
			:on-error="fileUploadError"
			name="file[]">
			<el-button 
				slot="trigger" 
				size="small" 
				type="primary"
				class="el-button-primary">选取文件</el-button>
			<span v-if="remark" style="margin-left: 10px;">{{remark}}</span>	
		  <div slot="tip" class="el-upload__tip">{{errorMessage}}</div>
		</el-upload>
	</div>
</template>

<script>
	// import { mapGetters } from 'vuex'
	import { crmFileDelete as FileDelete, FileSaveUrl } from '@/api/common'
	import Lockr from 'lockr'
	export default {
		data(){
			return{
				//限制上传文件类型
				FileAccepType:'image/*,.doc,.docx,.xlsx,.xls,.pdf,.ppt,.pptx',
				//文件集合
				// fileList: this.formData.file,
				// 错误提示
				errorMessage: "文件格式：jpg/png/docx/doc/pdf/xlsx/xls/ppt/pptx，文件大小：不能超过20M",
			}
		},
		props:{
			modelName:{
				type:String,
				default:''
			},
			fileinfo:{
				type:[Array,String],
				default:()=>[]
			},
			remark:{
				type:String,
				default:''
			},
			field:{
				type:String,
				default:''
			},
		},
		computed: {
		  // ...mapGetters(['file_info']),
		  FileSaveUrl() {
		    return  window.BASE_URL + FileSaveUrl
		  },
		  httpHeader() {
		    return {
		      authKey: Lockr.get('authKey'),
			  sessionId: Lockr.get('sessionId')
		    }
		  }
		},
		methods:{
			// 删除附件前事件
			handleFileRemove(file,fileList){
				if(file.response || file.file_id){
					let file_id
					if (file.response) {
					  file_id = file.response.data[0].file_id
					} else {
					  file_id = file.file_id
					}
					this.$confirm('您确定要删除该文件吗?', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
						// 服务器删除
						FileDelete({
							file_id: file_id
						}).then(res => {
							this.$message.success('删除成功!')
							var removeIndex = this.getFileIndex(
								this.$refs.fileUpload.uploadFiles,
								file_id
							)
							if (removeIndex != -1) {
								this.$refs.fileUpload.uploadFiles.splice(removeIndex, 1)
							}
							if(fileList.length>0){
								let fileIdList = []
								fileIdList = fileList.map(function(file, index, array) {
								  if (file.response) {
								    return file.response.data[0].file_id
								  } else if (file.file_id) {
								    return file.file_id
								  }
								  return ''
								})
								// 回传上传后的文件ID
								this.$emit('uploadFile',fileIdList)
							}
						}).catch(() => {})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消操作'
						})
					})
					return false
				}else{
					return true
				}
			},
			
			// 附件索引
			getFileIndex(files, file_id) {
			  var removeIndex = -1
			  for (let index = 0; index < files.length; index++) {
			    const item = files[index]
			    let item_file_id
			    if (item.response) {
			      item_file_id = item.response.data[0].file_id
			    } else {
			      item_file_id = item.file_id
			    }
			    if (item_file_id == file_id) {
			      removeIndex = index
			      break
			    }
			  }
			  return removeIndex
			},
			
			fileUploadError(err, file, fileList){
				console.log(err);
			},
			
			// 文件上传成功的事件
			fileUploadSuccess(response, file, fileList) {
				let fileIdList = []
				// console.log(fileList);
				fileIdList = fileList.map(function(file, index, array) {
				  if (file.response) {
				    return {
						"name":file.response.data[0].name,
						"file_id":file.response.data[0].file_id
					}
				  } else if (file.file_id) {
				    return {
						"name":file.name,
						"file_id":file.file_id
					}
				  }
				  return ''
				})
				// 回传上传后的文件ID
				this.$emit('uploadFile',fileIdList,this.field)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .el-form-item__content {
		width: auto !important;
	}
</style>
